<template>
  <div style="height: 100%">
    <echart-pie
      v-if="slotComponent == 1"
      class="dashboard-chart"
      :dataOptionList="componentItemList[0].data"
      ref="echartDeviceStatusPieComponent"
      @toDetail="toDeviceList"
    ></echart-pie>
    <echart-pie
      v-else-if="slotComponent == 2"
      class="dashboard-chart"
      :dataOptionList="componentItemList[1].data"
      ref="echartDeviceSummaryComponent"
      @toDetail="toAlarmHistory"
    ></echart-pie>
    <echart-line-with-time
      v-else-if="slotComponent == 3"
      class="dashboard-chart"
      @getData="getDeviceAlarmTypeDataList"
      :dataSetSource="componentItemList[2].data"
      ref="echartAlarmSafeComponent"
    ></echart-line-with-time>
    <echart-line-with-time-and-value
      v-else-if="slotComponent==4"
      class="dashboard-chart"
      @getData="getDeviceDataList"
      :dataSetSource="componentItemList[3].data"
      ref="echartDeviceLine"
    ></echart-line-with-time-and-value>
    <alarm-push
      class="dashboard-chart"
      v-else-if="slotComponent==5"
    ></alarm-push>
    <echart-line-product
      ref="echartProductLine"
      class="dashboard-chart"
      v-else-if="slotComponent==6"
      @getData="getProductResetCountList"
      :dataSetSource="componentItemList[5].data"
    ></echart-line-product>
    <echart-pie
      v-else-if="slotComponent == 7"
      class="dashboard-chart"
      :dataOptionList="componentItemList[6].data"
      ref="echartProductSettingStatusPie"
      @toDetail="toProductList"
    ></echart-pie>
    <echart-pie
      v-else-if="slotComponent == 8"
      class="dashboard-chart"
      :dataOptionList="componentItemList[7].data"
      ref="echartProductPackageStatusPie"
      @toDetail="toProductList"
    ></echart-pie>
    <echart-bar
      v-else-if="slotComponent == 9"
      class="dashboard-chart"
      :dataOptionList="componentItemList[8].data"
      ref="echartProductTypeLine"
    ></echart-bar>
    <div
      v-else
      class="dashboard-chart no-data-box"
    >
      <svg-icon
        class="no-data-show"
        icon-class="no-data"
      ></svg-icon>
    </div>
  </div>
</template>

<script>
import EchartPie from './component/echartPie';
import EchartLineWithTime from './component/echartLineWithTime';
import EchartLineWithTimeAndValue from './component/echartLineWithTimeAndValue';
import AlarmPush from './component/alarmPush';
import echartLineProduct from './component/echartLineProduct';
import EchartBar from './component/echartBar';
import { getDeviceStatusCountListApi, getDeviceSummaryApi, getDeviceTendencyApi, getDeviceDataFromRangeApi } from '../../api/device';
import { getResetCountListRangeApi, getProductSettingStatusCountListApi, getProductPackageStatusCountListApi, getProductTypeCountListApi } from '../../api/upgradeDevice';
import { Message, MessageBox } from 'element-ui';
import { parseError } from '../../utils';
import EchartLineProduct from './component/echartLineProduct.vue';
export default {
  components: {
    EchartPie,
    EchartLineWithTime,
    EchartLineWithTimeAndValue,
    AlarmPush,
    EchartBar,
    echartLineProduct
  },
  props: {
    slotComponent: {
      type: Number
    },
    componentItemList: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      topType: 10
    };
  },
  watch: {
    slotComponent: {
      handler(val) {
        if (val == 1) this.getDeviceStatusCount();
        if (val == 2) this.getDeviceSummary();
        if (val == 7) this.getProductSettingCount();
        if (val == 8) this.getProductPackageCount();
        if (val == 9) this.getProductTypeCount();
      }
    }
  },
  methods: {
    // 设备状态扇形图
    getDeviceStatusCount() {
      getDeviceStatusCountListApi()
        .then(res => {
          let deviceStatus = {};
          res.forEach(item => {
            deviceStatus[item.device_status] = item.count || 0;
          });
          this.componentItemList[0].data = {
            colorList: ['#10aeff', '#07c160', '#fa5151', '#ffc300', '#aaa'],
            dataPie: [
              ['设备状态', '当前'],
              ['未知', deviceStatus.unknown],
              ['正常', deviceStatus.normal],
              ['告警', deviceStatus.abnormal],
              ['临检', deviceStatus.oncheck],
              ['离线', deviceStatus.offline]
            ]
          };
          this.$nextTick(() => {
            this.$refs.echartDeviceStatusPieComponent.getEchartData();
          });
        })
        .catch(error => Message.error(parseError(error)));
    },
    toDeviceList() {
      let deviceHistoryRoute = this.$router.resolve('/device/list');
      window.open(deviceHistoryRoute.href, '_blank');
    },
    // 设备处理状态
    getDeviceSummary() {
      getDeviceSummaryApi()
        .then(res => {
          this.componentItemList[1].data = {
            colorList: ['#ff5959', '#07d469'],
            dataPie: [
              ['告警处理状态', '当前'],
              ['未处理', res.alarm.unprocessed_count || 0],
              ['已处理', res.total_count - res.alarm.unprocessed_count || 0]
            ]
          };
          this.$nextTick(() => {
            this.$refs.echartDeviceSummaryComponent.getEchartData();
          });
        })
        .catch(error => Message.error(parseError(error)));
    },
    toAlarmHistory() {
      let dataRecordRoute = this.$router.resolve('/alarm/history');
      window.open(dataRecordRoute.href, '_blank');
    },
    // 安全风险曲线
    getDeviceAlarmTypeDataList(start, end) {
      getDeviceTendencyApi(start, end)
        .then(res => {
          this.componentItemList[2].data = res;
          this.$nextTick(() => {
            this.$refs.echartAlarmSafeComponent.getEchartData();
          });
        })
        .catch(error => Message.error(parseError(error)));
    },
    // 设备曲线
    getDeviceDataList(uuid, start, end) {
      getDeviceDataFromRangeApi([uuid], start, end)
        .then(res => {
          this.componentItemList[3].data = res;
          this.$nextTick(() => {
            this.$refs.echartDeviceLine.getEchartData();
          });
        })
        .catch(error => Message.error(parseError(error)));
    },
    getProductResetCountList(serialNumber, start, end) {
      getResetCountListRangeApi(serialNumber, start, end)
        .then(res => {
          this.componentItemList[5].data = res;
          this.$nextTick(() => {
            this.$refs.echartProductLine.getEchartData();
          });
        })
        .catch(error => Message.error(parseError(error)));
    },
    getProductSettingCount() {
      getProductSettingStatusCountListApi()
        .then(res => {
          let productStatus = {};
          res.forEach(item => {
            productStatus[item.upgrade_status] = item.count || 0;
          });
          this.componentItemList[6].data = {
            colorList: ['#fa5151', '#07c160', '#c87d2f'],
            dataPie: [
              ['产品参数', '当前'],
              ['未知', productStatus.unknown || 0],
              ['已升级', productStatus.upgraded || 0],
              ['待升级', productStatus.toupgrade || 0]
            ]
          };
          this.$nextTick(() => {
            this.$refs.echartProductSettingStatusPie.getEchartData();
          });
        })
        .catch(error => Message.error(parseError(error)));
    },
    getProductPackageCount() {
      getProductPackageStatusCountListApi()
        .then(res => {
          let productStatus = {};
          res.forEach(item => {
            productStatus[item.upgrade_status] = item.count || 0;
          });
          this.componentItemList[7].data = {
            colorList: ['#fa5151', '#07c160', '#c87d2f'],
            dataPie: [
              ['产品固件包', '当前'],
              ['未知', productStatus.unknown || 0],
              ['已升级', productStatus.upgraded || 0],
              ['待升级', productStatus.toupgrade || 0]
            ]
          };
          this.$nextTick(() => {
            this.$refs.echartProductPackageStatusPie.getEchartData();
          });
        })
        .catch(error => Message.error(parseError(error)));
    },
    getProductTypeCount() {
      getProductTypeCountListApi(this.topType)
        .then(res => {
          let lineDataX = [];
          let lineDataY = [];
          res.forEach((item, index) => {
            lineDataX[index] = item.name;
            lineDataY[index] = item.count;
          });
          this.componentItemList[8].data = {
            colorList: ['#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
            title: '产品类型',
            lineX: lineDataX,
            lineY: lineDataY
          };
          this.$nextTick(() => {
            this.$refs.echartProductTypeLine.getEchartData();
          });
        })
        .catch(error => Message.error(parseError(error)));
    },
    toProductList() {
      let productListRoute = this.$router.resolve('/upgrade/device/list');
      window.open(productListRoute.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.dashboard-chart {
  height: 100%;
}
.no-data-box {
  position: relative;
}
.no-data-show {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
